
<template>
  <div class="w-full h-full">
    <el-container class="w-full h-full">
      <el-header class="text-center border-b dark:bg-black dark:text-white">
        <div class="mt-4 w-full space-x-16 inline-block">
          <RouterLink exact :to="{ name: 'index' }"
            class="pt-4 text-gray-400 no-underline  hover:text-blue-500   w-14 h-8 text-center"
            active-class="border-b-2 active-text-color underline text-sky-600 border-blue-500">音标练习
          </RouterLink>
          <RouterLink exact :to="{ name: 'read' }"
            class="pt-4 text-gray-400 no-underline  hover:text-blue-500   w-14 h-8 text-center"
            active-class="border-b-2 active-text-color underline text-sky-600 border-blue-500">口语评测
          </RouterLink>
          <RouterLink exact :to="{ name: 'jduge' }"
            class="pt-4 text-gray-400 no-underline hover:text-blue-500   w-14 h-8 text-center"
            active-class="border-b-2 active-text-color text-sky-600 underline border-blue-500">场景对话
          </RouterLink>
          <div class=" float-right space-x-5">
            <span @click="swichMode" class="cursor-pointer">
              <el-icon v-if="isDark">
                <Moon />
              </el-icon>
              <el-icon v-else="isDark">
                <Sunny />
              </el-icon>
            </span>
            <span @click="logout" class="  cursor-pointer">
              <el-icon>
                <SwitchButton />
              </el-icon>
            </span>

          </div>
        </div>
      </el-header>
      <el-main class="dark:text-white dark:bg-zinc-900">
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
let logout = () => {
  localStorage.removeItem('token')
  router.push({ name: 'login' })
}

let isDark = ref(false)
let swichMode = () => {
  isDark.value = !isDark.value
  if (isDark.value) {
    document.querySelector('html').classList.add('dark')
  } else {
    document.querySelector('html').classList.remove('dark')
  }
}


</script>

<style scoped>
.active-text-color {
  color: #3370ff !important;
  text-decoration: underline;
}

.border-b {
  border-bottom: 1px solid #e4e7ed;
}
</style>
